<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="tab in tabList"
        :key="tab.name"
        :label="tab.label"
        :name="tab.name"
      >
    <!-- 我的接收库内容 -->
    <div style="display: flex; justify-content: space-between">
<!--      <el-button size="mini" type="primary" @click="tjBtn()"-->
<!--        >添加接收库</el-button-->
<!--      >-->
      <el-input
        placeholder="请输入内容"
        v-model="name"
        class="input-with-select"
        style="width: 300px"
        clearable
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="searchBtn"
        ></el-button>
      </el-input>
    </div>

    <el-table :data="tableData" border style="width: 100%; margin-top: 10px">
      <el-table-column

        prop="databaseName"
        label="接收库名称"
        align="center"
      >
      </el-table-column>
      <!-- 动态表头和内容列 -->
      <el-table-column v-if="colFlag" align="center">
        <template slot="header" slot-scope="scope">
          <span>{{ currentLabel }}</span>
        </template>
        <template slot-scope="scope">
          <span v-if="scope.row.databaseType">{{ scope.row.databaseType }}</span>
          <span v-else>{{ scope.row.filebaseType }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="baseIp" label="主机名" align="center">
      </el-table-column>
      <el-table-column prop="basePort" label="端口" align="center">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="添加时间"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.createTime | formatDate }}
        </template>
      </el-table-column>
<!--      <el-table-column fixed="right" label="操作" width="170" align="center">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="text" size="small" @click="checkBtn(scope.row)"-->
<!--            >查看</el-button-->
<!--          >-->
<!--          <el-popconfirm-->
<!--            title="这是一段内容确定删除吗？"-->
<!--            @confirm="handleDelete(scope.row)"-->
<!--          >-->
<!--            <el-button slot="reference" type="text" size="small">-->
<!--              删除</el-button-->
<!--            >-->
<!--          </el-popconfirm>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>

    <el-dialog title="添加接收库" :visible.sync="dialogFormVisible">
      <el-form :model="form" style="width: 100%" :rules="rules" ref="ruleForm">
        <el-form-item label="接收库类型" prop="value">
          <div style="display: flex">
            <el-select
              v-model="form.type"
              placeholder="请选择库类型"
              style="width: 30%"
              :disabled="view"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>

            <el-select
              v-model="form.dataType"
              placeholder="请选择数据库类型"
              style="width: 30%"
              :disabled="view"
              v-if="form.type === 1"
            >
              <el-option
                v-for="item in options2"
                :key="item.name"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input
              style="width: 30%"
              v-model="form.dbName"
              placeholder="请输入数据库名称"
              :disabled="view"
              v-if="form.type === 1"
            ></el-input>
            <el-select
              v-model="form.dataType"
              style="width: 30%"
              :disabled="view"
              placeholder="请输入接收库类型"
              v-if="form.type == 2"
            >
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item
          label="接收库名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input
            v-model="form.name"
            placeholder="请输入接收库名称"
            :disabled="view"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="IP/主机名"
          :label-width="formLabelWidth"
          prop="host"
        >
          <el-input
            v-model="form.host"
            placeholder="请输入IP/主机名"
            :disabled="view"
          ></el-input>
        </el-form-item>
        <el-form-item label="端口" :label-width="formLabelWidth" prop="port">
          <el-input
            v-model="form.port"
            placeholder="请输入端口"
            :disabled="view"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="用户名"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
            :disabled="view"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          :label-width="formLabelWidth"
          prop="password"
        >
          <el-input
            type="password"
            v-model="form.password"
            placeholder="请输入密码"
            :disabled="view"
          ></el-input>
        </el-form-item>

        <el-form-item
          label="连接方式"
          :label-width="formLabelWidth"
          v-if="form.dataType === 2"
          prop="oracleType"
          :disabled="view"
        >
          <el-radio-group v-model="form.oracleType">
            <el-radio :label="1">sid</el-radio>
            <el-radio :label="2">service_name</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="JDBC 连接参数"
          :label-width="formLabelWidth"
          v-if="form.type === 1 || form.type === ''"
        >
          <div style="display: flex">
            <el-input
              v-model="form.param"
              placeholder="请输入JDBC 连接参数"
            ></el-input>
            <el-button
              size="mini"
              type="primary"
              @click="testBtn"
              style="margin-left: 20px"
              >测试连通</el-button
            >
          </div>
        </el-form-item>
        <el-form-item
          label="接收库路径"
          :label-width="formLabelWidth"
          v-if="form.type == 2"
        >
          <div style="display: flex">
            <el-input
              v-model="form.param"
              placeholder="请输入文件路径"
            ></el-input>
            <el-button
              size="mini"
              type="primary"
              @click="testBtn"
              style="margin-left: 20px"
              >测试连通</el-button
            >
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="!view">
        <el-button @click="cancel('addFormRef')">取 消</el-button>
        <el-button type="primary" @click="confirmBtn()">确 定</el-button>
      </div>
    </el-dialog>

    <div style="display: flex; justify-content: flex-end">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="prev, pager, next, sizes, jumper"
        :total="totalNum"
      >
      </el-pagination>
    </div>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
  getQueryByPage,
  getDatasourceList,
  getDebug,
  getdestinationSave,
  getdestinationDelete,
  getDestinationInfo,
} from "@/utils/httpUtils";
export default {
  data() {
    return {
      colFlag: false,
      resourceType:0,
      activeName: "dataResource",
      tabList: [
        {
          label: "数据库",
          name: "dataResource",
          type: 0,
        },
        {
          label: "文件库",
          name: "serviceResource",
          type: 1,
        },
      ],
      showInput: true,
      view: false,
      name: "",
      tableData: [],
      currentPage: 1,
      pageNo: 1,
      pageSize: 10,
      status: "",
      totalNum: 0,
      dialogFormVisible: false,
      form: {
        type:"",
        dataType:"",
        dbName: "",
        name: "",
        host: "",
        port: "",
        username: "",
        password: "",
        param: "",
        oracleType: "",
      },
      rules: {
        // value: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        name: [
          {
            required: true,
            message: "接收库名称不能为空, 且长度不能超过50",
            trigger: "blur",
          },
          { min: 0, max: 50, message: "长度不能超过50", trigger: "blur" },
        ],
        host: [
          {
            required: true,
            message: "主机名不能为空, 且长度不能超过50",
            trigger: "blur",
          },
          { min: 0, max: 50, message: "长度不能超过50", trigger: "blur" },
        ],
        port: [
          {
            required: true,
            message: "端口号不能为空, 且长度不能超过50",
            trigger: "blur",
          },
          { min: 0, max: 50, message: "长度不能超过50", trigger: "blur" },
        ],
        username: [
          {
            required: true,
            message: "用户名不能为空, 且长度不能超过50",
            trigger: "blur",
          },
          { min: 0, max: 50, message: "长度不能超过50", trigger: "blur" },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空, 且长度不能超过50",
            trigger: "blur",
          },
          { min: 0, max: 50, message: "长度不能超过50", trigger: "blur" },
        ],
        oracleType: [
          { required: true, message: "连接方式不能为空", trigger: "blur" },
        ],
      },
      formLabelWidth: "180px",
      options1: [
        { value: 1, label: "数据库" },
        { value: 2, label: "文件库" },
      ],
      options2: [],
      options3: [
        { value: "1", label: "FTP" },
        { value: "2", label: "SFTP" },
      ],
    };
  },
  //   处理1703592547000 时间格式
  filters: {
    formatDate(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  },
  mounted() {
    this.getList();
    // this.datasourceList();
  },
  computed: {
    currentLabel() {
      // 检查表格数据中的第一个对象，决定当前的label
      const firstRow = this.tableData[0];
      if (firstRow && firstRow.databaseType) {
        this.colFlag = true;
        return '接收库类型';
      } else if (firstRow && firstRow.filebaseType) {
        this.colFlag = true;
        return '文件库类型';
      }
      this.colFlag = false;
      return '';
    },
  },
  methods: {
    handleClick(tab, event) {
      // 数据资源
      if (tab.label == "数据库") {
        this.resourceType = 0;
       this.getList()

      } else if (tab.label == "文件库") {
        this.resourceType = 1;
        this.getList();
      }
    },
    tjBtn() {
      this.dialogFormVisible = true;
      this.view = false;
      this.form = {};
    },
    cancel() {
      this.dialogFormVisible = false;
      this.form = {
        dataType:"",
        type:"",
        dbName: "",
        name: "",
        host: "",
        port: "",
        username: "",
        password: "",
        param: "",
        oracleType: "",
      };
      this.$refs.ruleForm.resetFields();
    },
    searchBtn() {
      this.getList();
    },
    getList() {
      getQueryByPage({
        jskType:this.resourceType,
        pageNum: this.pageNo,
        pageSize: this.pageSize,
        keyWord: this.name,
      }).then((res) => {
        // console.log(res, "我的接收库123");
        this.tableData = res.content;
        // this.currentPage = res.data.currentPage;
        this.totalNum = res.totalElements;
        this.name = ""
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNo = val;
      this.getList();
    },
    // 数据库类型列表
    datasourceList() {
      getDatasourceList().then((res) => {
        console.log(res, "数据库类型列表");
        this.options2 = res.data;
      });
    },
    testBtn() {
      getDebug({
        id:this.form.id,
        kerberos: 0,
        type: this.form.type,
        dataType: this.form.dataType,
        name: this.form.name,
        host: this.form.host,
        port: this.form.port,
        username: this.form.username,
        password: this.form.password,
        param: this.form.param,
        dbName: this.form.dbName,
      }).then((res) => {
        console.log(res, "debug");
        this.$message({
          message: res.msg,
          type: "erroy",
        });
      });
    },
    confirmBtn() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          getdestinationSave({
            kerberos: 0,
            type: this.form.type,
            dataType: this.form.dataType,
            name: this.form.name,
            host: this.form.host,
            port: this.form.port,
            username: this.form.username,
            password: this.form.password,
            param: this.form.param,
            dbName: this.form.dbName,
            oracleType: this.form.oracleType,
          }).then((res) => {
            console.log(res, "添加");
            if (res.code == "000000") {
              this.$message({
                message: res.msg,
                type: "success",
              });
              this.dialogFormVisible = false;
              this.getList();
              this.form = {};
              this.view = false; // 确保在添加后启用表单
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
              this.dialogFormVisible = false;
            }
          });
        }
      });
    },
    handleDelete(row) {
      console.log(row, "点了-删除审批");
      getdestinationDelete({
        id: row.id,
      }).then((res) => {
        console.log(res, "删除成功");
        if (res.code == "000000") {
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.getList();
        }
      });
    },
    checkBtn(row) {
      this.dialogFormVisible = true;
      this.view = true;
      getDestinationInfo({
        id: row.id,
      }).then((res) => {
        // console.log(res, "查看");
        this.form = res.data;
        console.log(this.form,"this.form数据");
      });
    },
  },
};
</script>
<style scoped>
.el-input {
  width: 300px;
}
</style>
